<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Liujingjing
 * @LastEditTime: 2022-01-10 11:58:50
-->
<template>
  <div ref="right1_container" style="height: 100%"></div>
</template>
//获取请求工具
<script>
import { get } from "../../../utils/request";
import { DualAxes } from "@antv/g2plot";
import moment from 'moment'
export default {
    mounted() {
  //  this.loadData();
  this.initData()
  },
    data() {
    return {
      dataArr: [],
          };
  },
    //方法，可以在生命周期中调用，或被事件触发
  methods: {
    initData(){
      get('http://8.130.15.199:7001/dashboard/pageQueryTodayData',{
        page:1,
        pageSize :5,
        device_id:1,
        
      }).then(res=>{
        res.data.list.forEach(item => {
          item.dataTime = moment(item.insert_time).format('HH:mm')
        });
        this.dataArr= res.data.list;
        console.log(4444,this.dataArr);
        this.initChart()
      })
    },
    initChart() {
      const dualAxes = new DualAxes(this.$refs.right1_container, {
        data: [this.dataArr,this.dataArr],
        xField: "dataTime",
        yField: ["humidity", "id"],
        autoFit:true,
        
        geometryOptions: [
          {
            geometry: "line",
            color: "#5B8FF9",
          },
          {
            geometry: "line",
            color: "#5AD8A6",
          },
        ]
      })
            dualAxes.render()
    },
      },
};
</script>
<style scoped>
</style>
